import Wrapper from "./style";
import {Button, Form, Input, Modal} from "antd";
import blank from "@/static/imgs/courseContent/blank.png";
import {useEffect, useState} from "react";
import styled from "styled-components";
import {addTopic, getTopic} from "@/api/teacher/topicApi.ts";
import {useParams} from "react-router";
import dayjs from "dayjs";
import {useNavigate} from "react-router-dom";


const Topic = () => {

    const img = ''

    const navigate = useNavigate()

    const {courseId} = useParams()

    const [topicList, setTopicList] = useState([])

    const initTopic = () => {
        getTopic(courseId || '').then(res => {
            setTopicList(res.data.data)
        })
        console.log(topicList)
    }

    useEffect(() => {
        initTopic()
    }, [])

    const topBtnStyle = {
        backgroundColor: "#00ca90",
        borderColor: "#00ca90",
        color: "#fff",
        width: "144px",
        height: "36px",
        borderRadius: "20px",
    }
    const [isModelOpen, setIsModelOpen] = useState(false)

    const showModel = () => {
        setIsModelOpen(true)
    }

    const handleOK = () => {
        form.validateFields().then(() => {
            const title = form.getFieldValue('title')
            addTopic(courseId || '', title).then(() => {
                form.resetFields();
                initTopic()
                setIsModelOpen(false)
            })
        })
    }
    const handleModelCancel = () => {
        form.resetFields();
        setIsModelOpen(false)
    }

    const [form] = Form.useForm();

    type FieldType = {
        title?: string;
    };

    const TopicItemWrapper = styled.div`
        padding: 10px 16px 0 16px;
        background: #fff;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .box {
            width: 100%;
            background: #fff;
            display: flex;
            position: relative;

            .left {
                flex-direction: column;
                min-width: 85px;
                margin-right: 16px;
                font-size: 12px;
                display: flex;
                align-items: center;

                img {
                    height: 40px;
                    max-width: 40px;
                    margin-bottom: 10px;
                }

                .another-name {
                    position: relative;
                    margin-top: 5px;
                    line-height: 13px;
                    display: inline-block;
                    width: 85px;
                    text-align: center;
                    max-height: 31px;
                    margin-bottom: 2px;

                    span {
                        color: #3c4043;
                        font-size: 13px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        max-width: 65px;
                        max-height: 30px;
                        line-height: 15px;
                        word-break: break-all;
                        display: inline-block;
                        text-align: center;
                    }
                }
            }

            .right {
                width: 100%;
                border-bottom: 1px solid #eee;
                padding: 0 0 4px;
                font-size: 14px;
                display: flex;
                align-items: baseline;
                justify-content: space-between;

                .info {
                    .title {
                        text-align: start;
                        font-size: 16px;
                        margin-bottom: 12px;
                        max-width: 500px;
                        cursor: pointer;
                        color: #212121;
                        display: -webkit-box;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        word-break: break-all;
                        white-space: normal;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                    }

                    .bar {
                        color: #5f6368;
                        font-size: 12px;
                    }
                }
            }
        }
    `;

    const TopicItem = ({title, createAt, id}: any) => {
        return (
            <TopicItemWrapper>
                <div className="box">
                    <div className="left">
                        <img src={img} alt=""/>
                        <div className="another-name">
                            <span>话题</span>
                        </div>
                    </div>
                    <div className="right">
                        <div className="info">
                            <h6 className="title" onClick={() => {
                                navigate(`/topicDetail/${id}/老师/${courseId}`)
                            }}>{title}</h6>
                            <div className="bar">
                                <span>开始时间:{dayjs(createAt).format('YYYY/MM/DD HH:mm')}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </TopicItemWrapper>
        )
    }

    return (
        <Wrapper>
            <Modal title="新增话题" open={isModelOpen} onOk={handleOK} cancelText={'取消'}
                   onCancel={handleModelCancel}
                   okText={'确认'}
                   width={700}
            >
                <Form
                    form={form}
                    name="topic"
                    autoComplete="off"
                >
                    <Form.Item<FieldType>
                        label="话题主题"
                        name="title"
                        rules={[{required: true, message: '请输入话题主题'}]}
                    >
                        <Input/>
                    </Form.Item>
                </Form>
            </Modal>
            <div className="top flex">
                <div className="left flex">
                    <div>共</div>
                    <div>{topicList.length}</div>
                    <div>个活动</div>
                </div>
                <div className="right">
                    <Button style={topBtnStyle} type="primary" onClick={showModel}>+ 添加话题</Button>
                </div>
            </div>
            <div className="content">
                <div className="list">
                    {
                        topicList.map((item: any, index) => (
                            <TopicItem key={index} {...item}/>
                        ))
                    }
                </div>
                {
                    topicList.length === 0 && (
                        <div className="no-data">
                            <img src={blank} alt=""/>
                            <div>暂无数据</div>
                        </div>
                    )
                }
            </div>
        </Wrapper>
    )
}
export default Topic;